<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>贝塞尔曲线</title>
<meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" />
<style>
    @property --x{
        syntax:'<length>';
        initial-value: 0px ;
        inherits: false;
    }
    @property --y{
        syntax:'<length>';
        initial-value: 0px ;
        inherits: false;
    }
    .ball{
        height: 40px;
        width: 40px;
        background-color: brown;
        position: relative;
        left: 50%;
        top: 200px;
        border-radius: 50%;
        z-index: 9999;
    }
    .ball{
        transform: translate(var(--x),var(--y));
        animation: x 2s, y 1s;
        animation-timing-function: cubic-bezier(0.5, -1000, 0.5, 1000);
        animation-iteration-count: infinite;
    }
    @keyframes x {
        to{
            --x : 1px;
        }
    }
    @keyframes y {
        to{
            --y : 0.1px;
        }
    }
</style>
</head>
<body>
    <div class="ball"></div>
    <script>
        const ball=document.querySelector(".ball");
        ball.addEventListener('animationiteration ',function(){
        console.log(event)
    })
    let t=setInterval(()=>{
        console.log(ball);
        let x =  ball.getBoundingClientRect().left+18;
        let y = ball.getBoundingClientRect().top+18;
        createDot(x,y)
        console.log(x, y);
    },30)
    setTimeout(()=>{
        clearInterval(t);
    },6000)

    function createDot(x,y){
        var son=document.createElement("div");
		son.style.width="7px";
		son.style.height="7px";
		son.style.background="red"
		son.style.position="absolute";
		son.style.top=y+"px";
		son.style.left=x+"px";
		son.style.borderRadius="50%";
		document.body.appendChild(son);
    }
    </script>
</body>

</html>
